/**
 * @param {*} 哪一个元素对象 例如：div、img...
 */
function Drag(obj){
    obj.onmousedown = function(ev){
        //当某一个元素发生按下动作的时候就要一直监听这种行为（不让咱们文字进行选中）
        //setCapture 设置全局捕获 目的：为了能够解决IE8以下低版本文字选中的bug

        if(obj.setCapture){
            obj.setCapture();
        }
        //按下元素时候鼠标针对于元素的X轴和Y的距离
        var e = ev || window.event;
        var x = e.offsetX;
        var y = e.offsetY;


        //屏幕的可视宽度以及高度
        var screen_width = document.documentElement.clientWidth;
        var screen_height = document.documentElement.clientHeight;

        //元素的占位宽度
        var obj_width = obj.offsetWidth;
        var obj_height = obj.offsetHeight;


        //3、让元素在页面文档中发生移动
        document.onmousemove = function(ev){
            var e = ev || window.event;
            var cx = e.clientX;
            var cy = e.clientY;
            var move_x = cx -x;
            var move_y = cy - y;
            if(move_x<=0){
                move_x = 0;
            }else if(move_x>screen_width - obj_width){
                move_x = screen_width - obj_width ;
            }
            if(move_y<=0){
                move_y = 0;
            }else if(move_y>screen_height - obj_height){
                move_y = screen_height - obj_height;
            }
            obj.style.left = move_x +"px";
            obj.style.top = move_y +"px";
        }
        //4、鼠标抬起
        document.onmouseup = function(){
             //在当前动作没有执行完毕，里面事件还是在监听状态中，浏览器会卡死
             //所以当鼠标抬起的时候，让释放监听
             if(obj.releaseCapture){
                obj.releaseCapture();
             }
             
             document.onmousemove = null;
        }
        return false;
    }
}

/***
 * 多元素之间的碰撞封装
 * @param {*} obj1 移动元素
 * @param {*} obj2 固定参照元素
 */
function Drag1(obj1,obj2){
    obj1.onmousedown = function(ev){
        if(obj1.setCapture){
            obj1.setCapture();
        }
        var e = ev || window.event;
        var x = e.offsetX;
        var y = e.offsetY;
        //屏幕的可视宽度以及高度
        var screen_width = document.documentElement.clientWidth;
        var screen_height = document.documentElement.clientHeight;
    
        //元素的占位宽度
        var box1_width = obj1.offsetWidth;
        var box1_height = obj1.offsetHeight;
    
    
        //获取box2的四条边距离浏览器的边距
        var box2_left = obj2.offsetLeft;
        var box2_top = obj2.offsetTop;
        var box2_right = box2_left + obj2.offsetWidth;
        var box2_bottom = box2_top+obj2.offsetHeight;
    
        
        document.onmousemove = function(ev){
            var e = ev || window.event;
            var move_x = e.clientX - x;
            var move_y = e.clientY - y;
            if(move_x<=0){
                move_x = 0;
            }else if(move_x>screen_width - box1_width){
                move_x = screen_width - box1_width ;
            }
            if(move_y<=0){
                move_y = 0;
            }else if(move_y>screen_height - box1_height){
                move_y = screen_height - box1_height;
            }
            obj1.style.left = move_x +"px";
            obj1.style.top = move_y + "px";
    
            //获取box1的四条边距离浏览器的边距
            var box1_left = move_x;
            var box1_top = move_y;
            var box1_right = box1_left+obj1.offsetWidth;
            var box1_bottom = box1_top+obj1.offsetHeight;
    
            //边界判断
            if(box1_right<box2_left || box1_bottom<box2_top || box1_left>box2_right || box1_top>box2_bottom){
                obj2.style.background = " lime";
            }else{
                obj2.style.background = "orange";
            }
        }
        document.onmouseup = function(){
            if(obj1.releaseCapture){
                obj1.releaseCapture();
             }
            document.onmousemove = null;
        }
        return false;
    }
}
